<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>扫描类型列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/echarts/3.3.2/extension/bmap.min.js" type="text/javascript"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
  <fieldset class="layui-elem-field">
    <legend>服务信息</legend>
    <div id="main" style="width: 100%;height:700px;"></div>
    <div class="layui-field-box">
      <table class="layui-table">
        <thead>
        <tr>
          <th>服务编号</th>
          <th>服务展示名称</th>
          <th>服务名称</th>
          <th>检测值</th>
          <th>建议值</th>
          <th>核查结果</th>
          <th>查看详情</th>
        </thead>
        <tbody id="data-body">
        <tr>

        </tr>
        </tbody>
      </table>

    </div>
  </fieldset>
    <script>

      // 获取传递的id
      let id = "[[${#request.getParameter('id')}]]";

      /*查询数据的方法*/
      function getPageData(page, pageSize){
        // 获取数据列表
        $.ajax({
          type:"post",
          url:"/scan/data/detail",
          data: {id: id},
          dataType:"json",
          success:function (data) {
            console.log(data);
            if(data.code === 200){
              // 清空数据
              $("#data-body").empty();
              // 获取数据
              let strData = data.data.data;
              // 转换成标准的json格式
              strData = strData.replace(/'/g, "\"");
              console.log(strData);
              let jsonData = JSON.parse(strData);

              let passNum = 0;
              let noPassNum = 0;

              // 遍历数据的数组,生成对应的行
              $(jsonData).each(function () {

                if(this[5] === '符合'){
                  passNum++;
                }else {
                  noPassNum++;
                }

                // 创建数据行的dom对象
                let tr = $('<tr>\n' +
                        '            <td>'+this[0]+'</td>\n' +
                        '            <td>'+this[1]+'</td>\n' +
                        '            <td>'+this[2]+'</td>\n' +
                        '            <td>'+this[3]+'</td>\n' +
                        '            <td>'+this[4]+'</td>\n' +
                        '            <td>'+this[5]+'</td>\n' +
                        '            <td class="td-manage">\n' +
                        '              <a title="服务详细数据-'+this[2]+'" class="open_new_tab"  _href="/scan/data/service/detail/page?data='+this+'" href="javascript:;">\n' +
                        '                <i class="layui-icon">&#xe66b;</i>\n' +
                        '              </a>\n' +
                        '            </td>\n' +
                        '          </tr>');
                // 将数据追加到 tbody中
                $("#data-body").append(tr);

              });

              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main'));
              // 指定图表的配置项和数据
              option = {
                backgroundColor: '#2c343c',

                title: {
                  text: '服务检查情况',
                  left: 'center',
                  top: 20,
                  textStyle: {
                    color: '#ffffff'
                  }
                },

                tooltip : {
                  trigger: 'item',
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                visualMap: {
                  show: false,
                  min: 80,
                  max: 600,
                  inRange: {
                    colorLightness: [0, 1]
                  }
                },
                series : [
                  {
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:[
                      {value:passNum, name:'符合'},
                      {value:noPassNum, name:'不符合'},
                    ].sort(function (a, b) { return a.value - b.value}),
                    roseType: 'angle',
                    label: {
                      normal: {
                        textStyle: {
                          color: 'rgba(255, 255, 255, 0.3)'
                        }
                      }
                    },
                    labelLine: {
                      normal: {
                        lineStyle: {
                          color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                      }
                    },
                    itemStyle: {
                      normal: {
                        color: '#0be017',
                        shadowBlur: 1000,
                        shadowColor: '#ccc'
                      }
                    }
                  }
                ]
              };

              // 使用刚指定的配置项和数据显示图表。
              myChart.setOption(option);

            }

          }
        });
      }
      
      /*让整个dom文档加载完成之后再执行*/
      $(function () {
          getPageData(0, 0);
      })
    </script>

  </body>

</html>